<template>
  <div class="tabbar">
    <ul>
      <router-link v-for="(item,index) in tabs" :key="index" :to="item.path" tag="li">
        <i class="iconfont" v-html="item.icon"></i>
        <span>{{item.text}}</span>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Tabbar",
  data() {
    return {
      tabs: [
        {
          path: "/home",
          icon: "&#xe645;",
          text: "首页"
        },
        {
          path: "/shop",
          icon: "&#xe603;",
          text: "周边"
        },
        {
          path: "/crowd",
          icon: "&#xe628;",
          text: "众筹"
        },
        {
          path: "/mine",
          icon: "&#xe636;",
          text: "我的"
        }
      ]
    };
  }
};
</script>
<style scoped>
.tabbar {
  width: 100%;
  height: 1rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: white;

}
.tabbar ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabbar ul li {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #333;
}
.tabbar ul .router-link-active{
    color: #c33;
}
.tabbar ul li i {
  font-size: 0.4rem;
}
.tabbar ul li span {
  font-size: 0.3rem;
}
</style>